<script setup>
import {useRouter} from "vue-router";
import VideoCategoryApi from "@/api/VideoCategoryApi.js";
import { onMounted, reactive, watch} from "vue";
import VideoCard from "@/components/VideoCard.vue";
const router = useRouter()
import {useRoute} from "vue-router";
import VideoApi from "@/api/VideoApi.js";
import {useSystemSettingStore} from "@/store/index.js";
const {setting,setCurrentSideBarActive} = useSystemSettingStore()
const route = useRoute()
const state = reactive({
  categoryList: [],
  activeLevel2CategoryId:"ALL",
  queryDto: {
    pageNum: 1,
    size: 20,
    categoryId:null
  },
  videoList:[]
})
const getChildrenList = (parentId) => {
  if (router.currentRoute.value.path !== '/' || router.currentRoute.value.path !== "/index") {
    VideoCategoryApi.getChildrenCategoryList(parentId).then(res => {
      state.categoryList = res.data
    })
  }
}
onMounted(() => {
  setCurrentSideBarActive(router.currentRoute.value.params.categoryId)
  getChildrenList(router.currentRoute.value.params.categoryId)
  getVideoList(route.params.categoryId,true)
  if (state.categoryList.length>0){
    state.activeLevel2CategoryId = state.categoryList[0].categoryId
  }
})
const getVideoList = (categoryId,isDeepCategory)=>{
  state.queryDto.categoryId= categoryId
  state.queryDto.isDeepCategory= isDeepCategory
  VideoApi.getVideoList(state.queryDto).then(res=>{
    state.videoList = res.data.data
  })
}

const clickLevel2=(level2Id)=>{
  state.activeLevel2CategoryId = level2Id
  if (level2Id==='ALL'){
    getVideoList(router.currentRoute.value.params.categoryId,true)
  }else {
    getVideoList(level2Id,false)
  }

}
//监听路由变化
watch(() => route, (newRoute, oldRoute) => {

  if (newRoute.path!=='/' && newRoute.path!=="/index"){
    getChildrenList(newRoute.params.categoryId)
    getVideoList(newRoute.params.categoryId,true)
    state.activeLevel2CategoryId = "ALL"
  }
}, {immediate: false,deep:true})

</script>
<template>
  <div class="channel-main">
    <div class="category-box">
      <!--   二级分类盒子   -->
      <ul class="level2-box">
        <li  :class="state.activeLevel2CategoryId ==='ALL'?'level2-item active':'level2-item'"
            @click="clickLevel2('ALL')">
          全部</li>
        <li v-for="category in state.categoryList" :key="category.categoryId"
            :class="state.activeLevel2CategoryId ===category.categoryId?'level2-item active':'level2-item'"
            @click="clickLevel2(category.categoryId)"
        >{{ category.categoryName }}</li>
      </ul>
    </div>
  <!-- 视频卡片盒子   -->
    <div class="video-container" v-if="state.videoList.length>0">
      <VideoCard v-for="video in state.videoList" :key="video.videoCode" :video="video"/>
    </div>
    <el-empty description="暂无数据"/>
  </div>
</template>


<style scoped lang="less">
.channel-main {
  color: white;
}
.category-box{
  width: calc(100% - 40px);
  padding: 10px 20px;
}
.level2-box{
  display: flex;
  flex-wrap: wrap;
  padding: 0 20px;
  .level2-item{
    color: rgba(255,255,255,.5);
    width: calc((100% - (12 - 1)*12px - 40px) / 12);
    height: 30px;
    line-height: 12px;
    font-weight: 400;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 12px;
    background-color: #2c2c2c;
    margin:0 10px 10px 0;
  }

}
.active{
  font-size: 16px!important;
  //color:#00d1d1!important;
  color: #d2c9c9 !important;
  background-color: #00d1d1!important;
  font-weight: 600!important;
}
.video-container{
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 15px;
}
</style>